<template>
   <section id="shdetail"> 
        <div class="top" id="topimgs">
          <div class="swiper-container">
              <div class="swiper-wrapper">
                  <div class="swiper-slide">
                      <img src="../static/img/avatar.jpg"  width="100%" style="max-height:180px;">
                  </div>
                  <div class="swiper-slide" >
                      <img src="../static/img/avatar.jpg"  width="100%" style="max-height:180px;">
                  </div>
                  <div class="swiper-slide">
                      <img src="../static/img/avatar.jpg"  width="100%" style="max-height:180px;">
                  </div>
              </div>
              <div class="swiper-scrollbar" style='height:2px;'></div>
          </div>
        </div>
         <div class="middle">
            <div style="padding-top:10px;padding-bottom:10px;font-size:1.6rem;font-weight:600;">
              你好世界
            </div>
            <table border="0" width="100%" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="160">
                        <el-rate v-model="score" disabled  ></el-rate>
                    </td>
                    <td>订单：2</td>
                </tr>
            </table>
            <br>
            <table border="0" width="100%" cellspacing="0" cellpadding="0">
                <tr height="30">
                    <td>营业时间：1997.233.222</td>
                    <td width="30" style="text-align:right">
                       <a href=""><img src="../static/img/mobil.png" height="20"></a> 
                    </td>
                </tr>
                <tr>
                  <td colspan="2" style="border-top:1px solid #eee;"></td>
                </tr>
                <tr height="30" style='padding-top:5px;'>
                  <td style='vertical-align: middle;'>
                    地址：重庆市垫江县
                  </td>
                  <td width="50" style="text-align:right">
                      <img src="../static/img/add.png" height="20" style='margin-top:5px;'>
                  </td>
                </tr>
            </table> 
        </div>
        <div style="background-color:white; margin-top:15px;">
            <el-collapse style="padding-left:15px;padding-right:15px;">
                <el-collapse-item title="洗车标准" name="1">
                    <!-- <div v-for="(item,index) in this.servicedetail.standard.includeStandard.serveAllStandardInfos" :key="item.dataId">
                        {{index+1}}）{{item.name}}
                    </div> -->
                    <div>
                        1）普洗
                    </div>
                    <div>
                        1）普洗
                    </div>
                    <div>
                        1）普洗
                    </div>
                    
                </el-collapse-item>
            </el-collapse>
        </div>
        <div class="change-service-type">
           <!-- <div class="service-type1" v-for="(val,index) in merchantServe" :key="index">
              <input 
                class="radioService" 
                type="radio" 
                name="service" 
                :dataid="val.dataId" 
                :datayuanjian='val.servicePrice.originalCost' 
                :datazhekoujia='val.servicePrice.discount'
                :jiage="val.servicePrice.originalCost-val.servicePrice.discount" 
                @click.stop="price($event)">
              <p>
                 <img id='beijinimg' :src="(val.serviceType.dataId==1)||(val.serviceType.dataId==2)?car:suv" :alt="val.servicePrice.type" width="55" height="50" align="center">
                 {{val.serviceName}}
              </p>
              <p style="text-overflow: ellipsis; overflow: hidden;white-space:nowrap;padding-right:4rem;">{{val.intro}}</p>
              <p>￥{{val.servicePrice.originalCost-val.servicePrice.discount}} <span>￥{{val.servicePrice.originalCost}}</span></p>
           </div> -->
           <div class="service-type1" v-for="(val,index) in merchantServe" :key="index">
              <input 
                class="radioService" 
                type="radio" 
                name="service" 
                :dataid="val.dataId" 
                :datayuanjian='val.servicePrice.originalCost' 
                :datazhekoujia='val.servicePrice.discount'
                :jiage="val.servicePrice.originalCost-val.servicePrice.discount" 
                @click.stop="price($event)">
              <p>
                 <img id='beijinimg' :src="(val.serviceType.dataId==1)||(val.serviceType.dataId==2)?car:suv" :alt="val.servicePrice.type" width="55" height="50" align="center">
                 {{val.serviceName}}
              </p>
              <p style="text-overflow: ellipsis; overflow: hidden;white-space:nowrap;padding-right:4rem;">{{val.intro}}</p>
              <p>￥{{val.servicePrice.originalCost-val.servicePrice.discount}} <span>￥{{val.servicePrice.originalCost}}</span></p>
           </div>
        </div>
       <!--  <div class="middle" style="margin-top:15px;" v-show="this.showlist">
            <div v-for="item in pllist" :key="item.userId" style="border-bottom:1px solid #eee;padding-top:10px;padding-bottom:10px;">
                    <table border="0" width="100%" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="50">
                                <img :src="item.userHeadImg" width="40" height="40" style="border-radius: 20px;" >
                            </td>
                            <td>
                                <div class="pllist">
                                   <h4 style="margin:0px;">{{item.userName}}</h4>
                                   <el-rate  :value="item.synthesizeStar"  disabled></el-rate>
                                </div>
                            </td>
                            <td width="110" style="text-align:right;">
                               {{fftime(item.addTime)}}
                            </td>
                        </tr>
                    </table>
                    <div>
                        {{item.msg}}
                    </div> 
                   <div class="plimg" style="padding-top:5px;">
                        <el-row :gutter="5">
                             <el-col :span="8" v-for="img in item.files" :key="img.fileName">
                             <img :src="img.filePath" @click="evclickimg(0,img.filePath)"  width="100%" style="height:80px">
                            </el-col> 
                        </el-row> 
                   </div>
                   <div>{{item.seriesName }}&nbsp;&nbsp;普洗服务</div>
            </div>
            <br>
        </div> -->
        <div class="fukuan">
            <el-row>
                <el-col :span="14" style="background-color: #eee;">
                    <h3 style="margin:0px;">合计￥{{this.pricenow}}</h3>
                </el-col>
                <el-col :span="10"  style="background-color:#ec6517;"  >
                  <div style="width:100%;height:100%;"  @click.stop="submitorder"> <span style="color:white;">去结算</span> </div> 
                </el-col>
            </el-row>
        </div>
        <!-- 图片放大 -->
         <!--  <transition name="el-fade-in">
               <div class="showimg" v-show="this.showdivimg" @click="evclickimg">
               <img :src="this.showimgsrc">
            </div>
          </transition> 
          <br><br><br><br>  -->
   </section>
</template>
<script>
import {URL_GENERATE_ORDER,URL_GET_SERVICE} from "./comm.js";
import suv from '../static/img/suv.png';
import car from '../static/img/car.png';
export default {
  data: function() {
    return ({ 
      score:null,
      suv:suv,
      car:car,
      zhekoujia:'',
      yuanjian:'',
      pricenow:0,
      dataId:'',
      showimgsrc: "",
      showdivimg: false,
      shid: 5,
      sh: {},
      pllist: [],
      showlist: false,
      merchantServe:[
        {
          intro:'整车泡沫冲洗擦干，轮胎轮廓冲洗清洁，车内吸尘，内饰脚垫简单除尘',
          serviceNameL:'普洗',
          servicePrice:{
            discount:0,
            originalCost:20,
            type:'suv'
          },
          serviceType:{
            dataId:1
          }
        } 
      ],
      servicedetail: {
        dataId: 1,
        merchantId: 54,
        serviceName: "普洗",
        intro: "整车泡沫冲洗擦干，轮胎轮廓冲洗清洁，车内吸尘，内饰脚垫简单除尘",
        servicePrice: { dataId: 1, discount: "0", originalCost: "20" },
        standard: {
          includeStandard: { serveAllStandardInfos: [{name:"车身清洗"},{name:"前后挡风玻璃清洗"},{name:"车床清洗"},{name:"内饰除尘清理"},{name:"脚垫除尘或清洗"}]}
        }
      }
    });
  },
  beforeCreate: function() {
    $("title").text("查看商家");
  }, 
  created(){
    let send={
      merchantNumL:'12'
    };
    $.post(URL_GET_SERVICE,send,function(data){
      console.log('得到服务');
      console.log(data);
    });
  },
  mounted: function() {
    new Swiper ('.swiper-container', {
        autoplay : {
          delay:3000,
          disableOnInteraction: false,
        },
        scrollbar: {
           el: '.swiper-scrollbar',
        },
    }); 
    $('.swiper-scrollbar .swiper-scrollbar-drag').css('background','rgba(0,0,0,0.3)');
    let th = this;
    setTimeout(function() {
      let h = $(window).height();
      $('#beijinimg').attr('width','55');
      $("#shdetail").css("min-height", h + "px");
      $(".showimg").css("min-height", h + "px");
      $(".showimg").find("img").css("margin-top", (h - 300) / 2 + "px");
      //延迟加载图片
      // let timing = setInterval(function() {
      //   if (th.sh.files !== undefined) {
      //     let imgs = $("#topimgs").find("img");
      //     th.sh.files.forEach((item, index) => {
      //       $(imgs[index]).attr("src", item.filePath);
      //     });
      //     clearInterval(timing);
      //   }
      // }, 1000);
       $(window).scroll(function() {
        let b = $(document).height();
        let a = $(document).scrollTop();
        //判断是否有下一页
        if (listcount == pageNumber) {
          if (a + h >= b) {
            pageSize += pageNumber;
            //执行查询
            th.eventgetComment();
          }
        }
      });
    }, 500);
  },
  methods: {
    
    submitorder: function() {
      let This = this;
      let send={
        'standardNum':'2',
        'typeNum':'12'
      };
      $.post(URL_GENERATE_ORDER,send,function(data){
        console.log('返回');
        console.log(data)
        if(data.retult){

        }else{
          layer.open({ 
            content: '订单创建失败',
            skin: "msg",
            time: 3, 
            shift:1,  
            shadeClose:true   
          });
        }
      })
      //提交订单
      // if(parseFloat(th.pricenow)==0){
      //    layer.open({
      //     content: "请选择服务",
      //     skin: "msg",
      //     time: 3 
      //    });
      //    return ;
      // }
      // let json= {
      //     code: "1",
      //     merchantId: th.shid,
      //     merchantCode: th.sh.merchantCode,
      //     userId: $.cookie("userid"),
      //     merchantServeId: th.dataId,
      //     fullAmount: this.yuanjian,
      //     saleAmount: this.zhekoujia,
      //     realAmount:this.pricenow
      //   };
      //   for(let jsoni in json){
      //      let val=String(json[jsoni]).trim();
      //      if(!val||val=='null'||val=='undefined'){
      //         layer.open({
      //           content: "结算失败",
      //           skin: "msg",
      //           time: 3 
      //          });
      //          return ;
      //      }
      //   }
      // $.get(
      //   comm_default.requestSH + "/order/addOrder",json ,function(data) {
      //     if (data.executed) {  
      //       $.cookie("pay_orderNumber", data.orderNumber, { path: "/" });
      //       $.cookie("pay_realAmount", data.realAmount, { path: "/" });
      //       $.cookie("pay_orderId", data.orderId, { path: "/" });
      //       $.cookie("pay_merchantCode", th.sh.merchantCode, { path: "/" });
      //       th.$router.push({ path: "/ljjs" ,query:{serveTypeId:th.dataId}});
      //     } else {
      //       layer.open({
      //         content: "订单创建失败",
      //         skin: "msg",
      //         time: 3 
      //       });
      //     }
      //   }
      // );
    }
  }
};
</script>
<style>
#shdetail > .fukuan {
  text-align: center;
  width: 100%;
  background-color: white;
  line-height: 50px;
  height: 50px;
  position: fixed;
  left: 0px;
  bottom: 0px;
}
#shdetail > .fukuan a {
  text-decoration: none;
}
#shdetail > .top {
  width: 100%;
  max-height: 250px;
}

#shdetail > .middle {
  padding-left: 15px;
  padding-right: 15px;
  background-color: white;
}
#shdetail > .middle .pllist .el-rate__icon {
  margin-right: 0px;
  font-size: 14px;
}
#shdetail > .showimg {
  position: fixed;
  left: 0px;
  top: 0px;
  text-align: center;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7); 
}
#shdetail > .showimg img{
  height:300px; border-radius: 10px;
}
.change-service-type{
  margin-top: 1.5rem;
  background: #fff;
}
.change-service-type div{
  position: relative;
  height: 100px;
  padding: 0 0 1rem 0;
}
.service-type1{
  border-bottom: 1px solid #ddd;
}
.change-service-type input{
  position: absolute;
  right: 15px;
  top:35px;
  width: 1.8rem;
  height: 30px;
  opacity: 0.3;
}
.change-service-type div p:first-of-type{
  height:50px;
  margin:0;
  padding-left:1rem; 
  font-size:1.5rem;
  letter-spacing: 1.5px;
  font-weight: 900;
}
.change-service-type div p:nth-of-type(2){
  margin: -5px 0;
  padding-left: 1rem;
  color:#a3a3a3;
}
.change-service-type div p:nth-of-type(3){
  margin-top: 12px;
  padding-left: 1rem;
  font-size:1.8rem;
}
.change-service-type div p:nth-of-type(3) span{
  text-decoration:line-through;
  font-size:1.5rem;
  color:#a3a3a3;
}
/*.service-type1 .service-p1{
  height:50px;
  font-size:1.5rem;
  letter-spacing: 1.5px;
  font-weight: 900;
}*/
</style>
